import { h, init } from "snabbdom";
import style from "snabbdom/modules/style";
import classModule from "snabbdom/modules/class";
import eventlisteners from "snabbdom/modules/eventlisteners";
let patch = init([style, eventlisteners, classModule]);

// 默认数据
let result = [
    {
        rank: 8,
        title: "The Good",
        description: "A bounty...",
    },
    {
        rank: 7,
        title: "12 Angry Men",
        description: "A dissenting...",
    },
    {
        rank: 10,
        title: "Fight Club",
        description: "An insomniac...",
    },
];
// 首次渲染
let app = document.querySelector("#app");
let vnode = initVnode(result);
let oldNode = patch(app, vnode);
// 节点列表
function nodeList(data) {
    return data.map((item) =>
        h("li", { key: item.rank }, [
            h("span", { class: { num: true } }, item.rank),
            h("span", { class: { title: true } }, item.title),
            h("span", { class: { des: true } }, item.description),
        ])
    );
}
// 初始化节点
function initVnode(data) {
    let vnode = h("div", [
        h("h3", "Top 10 movies"),
        h("div", [
            h("span", "Sort by:"),
            h(
                "ul",
                {
                    style: {
                        display: "inline-block",
                    },
                    class: {
                        filter: true,
                    },
                },
                [
                    h(
                        "li",
                        { on: { click: () => handleSort("rank") } },
                        "Rank"
                    ),
                    h(
                        "li",
                        { on: { click: () => handleSort("title") } },
                        "Title"
                    ),
                    h(
                        "li",
                        { on: { click: () => handleSort("description") } },
                        "Description"
                    ),
                ]
            ),
            h(
                "button",
                {
                    style: {
                        padding: "3px 10px",
                    },
                    on: {
                        click: add,
                    },
                },
                "Add"
            ),
        ]),
        h(
            "ul",
            {
                class: {
                    list: true,
                },
            },
            nodeList(data)
        ),
    ]);
    return vnode;
}
// 点击排序
function handleSort(key) {
    let nData = result.sort(function (a, b) {
        if (key === "rank") {
            return a[key] - b[key];
        }
        return (a[key] + "").localeCompare(b[key] + "");
    });
    updataNode(nData);
}
// 更新节点
function updataNode(data) {
    vnode = initVnode(data);
    patch(oldNode, vnode);
}
// 添加列表
let i = 10
function add() {
    i++;
    let obj = {
        rank: i,
        title: "Fight Club" + i,
        description: "An insomniac..." + i,
    };
    let res = result.concat(obj);
    updataNode(res);
}
